<template>
    <div :class="{ 'vue-input': true }">
        <div class="main">
            <div class="pre"></div>
            <input class="input" :value="modelValue" @input="handleUpdate" v-bind="newAttrs" />
            <div class="suf">
                <img class="icon" @click="handleSearch" :src="imgSrc" />
            </div>
        </div>
        <ul class="suggest" v-if="modelValue && suggestOptions.length" @click="handleSelect">
            <li class="item" :class="{ active: item[labelAlias].includes(modelValue) }"
                v-for="(item, index) in suggestOptions" :key="index" :value="index"
                v-html="item[labelAlias].replace(modelValue, `<span style='color:#2f79fc;'>${modelValue}</span>`)"></li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="VueInput">
import { useAttrs, ref, defineEmits, defineOptions, type ImgHTMLAttributes, unref } from 'vue'

const attrs = useAttrs()
let newAttrs = attrs

type AnyObject<K extends string | number | symbol, V = any> = {
    [key in K]: V
}
const emits = defineEmits<{ 'update:modelValue': [string]; search: [string]; select: [AnyObject<string, any>] }>()
const { labelAlias, valueAlias, modelValue, suggestOptions } = defineProps({
    labelAlias: {
        type: String,
        default: 'label'
    },
    valueAlias: {
        type: String,
        default: 'value'
    },
    modelValue: {
        type: String,
        default: ''
    },
    suggestOptions: {
        type: Array<AnyObject<string, any>>,
        default: () => []
    }
})
const inputValue = ref('')
const imgSrc = ref<ImgHTMLAttributes['src']>(
    ''
)
const handleUpdate = (event: InputEvent) => {
    const target = event.target as EventTarget
    inputValue.value = (target as HTMLInputElement).value
    emits('update:modelValue', inputValue.value)
}
const handleSearch = () => {
    emits('search', inputValue.value)
}
const handleSelect = (e: Event) => {
    const target = e.target as EventTarget
    const value = (target as HTMLInputElement).value
    const item = suggestOptions[Number(value)]
    emits('select', unref(item))
    emits('update:modelValue', '')
}
defineOptions({
    name: 'VueInput'
})
</script>

<style lang="scss" scoped>
@import '../../config.scss';
@import '../../common.scss';

.#{$prefix}-input {
    width: 366px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    display: inline-block;
    vertical-align: middle;

    .main {
        display: flex;
        align-items: center;
        height: 100%;

        .pre {
            width: 32px;
            height: 100%;
        }

        .input {
            width: calc(100% - 114px);
            margin: 0;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 26px;
            color: #2f79fc;
            line-height: 40px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-radius: 50px;

            &::placeholder {
                font-weight: 400;
                font-size: 26px;
                color: #b4bfe5;
                line-height: 40px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .suf {
            width: 82px;
            height: 100%;
            position: relative;

            &::before {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                content: '';
                height: 22px;
                width: 1px;
                background: #b4bfe5;
            }

            .icon {
                width: 22px;
                height: 22px;
                margin: 0 36px 0 24px;
                margin-top: 50%;
                transform: translateY(-22px);
            }
        }
    }

    .suggest {
        position: absolute;
        z-index: 1000;
        width: 100%;
        height: calc(100vh - 200px);
        background: #ffffff;
        box-shadow: 0px 3px 30px 0px rgba(104, 136, 176, 0.2);
        border-radius: 8px;
        padding: 0;
        overflow-y: auto;

        .item {
            width: auto;
            height: 71px;
            font-weight: 400;
            font-size: 28px;
            color: #293957;
            line-height: 71px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding: 0;
            margin: 0;
            list-style: none;
            padding: 0 30px;

            &.active {
                background: rgba(47, 121, 252, 0.1);
                font-size: 28px;
            }
        }
    }
}
</style>
